<template>
  <view class="content">
	      <u-navbar leftIcon="man-add" title="个人中心" :placeholder="true" :leftIconColor="tksetting.titlecolor" :bgColor="tksetting.color" :titleStyle="{color:tksetting.titlecolor}"></u-navbar>
		 
		  <view  v-if="baseInfo">
			  <view class="head" :style="{background:tksetting.color}">
							  <view style="display: flex;justify-content:space-around;">
								  <view style="display: flex; align-items: center;gap: 20rpx;">
										  <u-avatar  :src="baseInfo.pic" size="60" mode="circle" class="avatar" :show-level="true" level-icon ="camera">
										  </u-avatar>
										  <view class="personInfo" :style="{color:tksetting.titlecolor}">
											  <view>{{cityName}}</view>
											  <view>{{baseInfo.name}}</view>
											  <view class="account" style="display: flex;gap: 10rpx;">
											   <u-icon name="phone" color="#fff"></u-icon>
											  {{baseInfo.tel}}
											  </view>
										  </view>
								  </view>
								  
								  <view style="text-align: center; display: flex; align-items: center;justify-content: center;flex-direction: column;" @click="makes">
								  		<u-icon name="/static/images/ewm2.svg" style="fill: white;"  size="28"></u-icon>
										<u--text color="#fff"  block text="出示二维码"></u--text>
								  </view>
								  
							  </view>
							  
			  </view>
			  <view style="padding: 30rpx; display: flex;gap: 20rpx; justify-content: space-around;">
				 
				  <u--text prefixIcon="share" type="info"  block :text="`我的分享 ${tuanyuan} 人`"></u--text>
				  <u--text @click="router({name:'/pages/user/jflog/jflog'})" prefixIcon="coupon" type="info"  block :text="`我的积分 ${baseInfo.jifen}`"></u--text>
			  </view>
			  
			  <!-- 宫格菜单 -->
			    <!-- <u-line></u-line>
			    <view style="padding: 0rpx 0 40rpx 0;">
					<u-grid col="4"  :border="false">
					   <u-grid-item
						   v-for="(baseListItem,baseListIndex) in baseList"
						   :key="baseListIndex"
						   name="/pages/user/userinfo" @click="router"
					   >
						   <u-icon
								   :customStyle="{paddingTop:20+'rpx'}"
								   :name="baseListItem.name"
								   :size="22"
						   ></u-icon>
						   <text style="font-size: 30rpx;color: #606266;">{{baseListItem.title}}</text>
					   </u-grid-item>
				    </u-grid>
				</view> -->
			  
			   <u-gap height="6" bgColor="#eaeaea"></u-gap>
		       <u-cell-group >
				   
				   <!-- #if APP-PLUS -->
				   	<u-cell 
					:iconStyle="{'color':'#f00'}"
					:titleStyle="{'color':'#f00'}"
					v-if="!baseInfo.tel" isLink icon="phone" name="/pages/user/yzmobie" title="手机验证" @click="router"></u-cell>
				   <!-- #endif -->
				   
				   <u-cell v-if="baseInfo.manage==1" isLink  icon="scan" title="积分核销" @click="scan"></u-cell>
				   <u-cell icon="scan" title="打卡" @click="scan_renwu"></u-cell>
				   <u-gap height="6" bgColor="#eaeaea"></u-gap>
				   
				  <!--  <u-cell isLink icon="shopping-cart" title="我的订单" name="/pages/user/order/order" @click="router"></u-cell>
					<u-cell isLink icon="heart" title="我的收藏" name="/pages/tiku/mytiku/collect" @click="router"></u-cell>
					<u-cell isLink icon="close-circle" title="我的错题" name="/pages/tiku/mytiku/mytiku" @click="router"></u-cell> -->
					
					<u-cell isLink icon="gift" name="/pages/user/myduijiang" title="我的奖品" @click="router"></u-cell>
					
					<u-cell isLink icon="map" name="/pages/user/addlist/addlist" title="地址管理" @click="router"></u-cell>
					
					<!-- <u-cell isLink icon="setting" title="题库设置" name="/pages/user/setting" @click="router"></u-cell> -->
				    <!-- <u-cell isLink icon="share-square" title="分享二维码" @click="makes"></u-cell> -->
					<u-cell v-if="baseInfo.renwu==0" isLink icon="account" title="个人信息" name="/pages/renwu/upuser" @click="router">
						<u-badge  slot="right-icon"  :value="`+${tksetting.upuser}积分`"></u-badge>
					</u-cell>
					<u-cell v-else isLink icon="account" title="个人信息" name="/pages/renwu/upuser" @click="router">
					</u-cell>
					<u-cell isLink icon="map" name="/pages/renwu/uparea" title="切换城市" @click="router">
						<u-badge  slot="right-icon"  :value="baseInfo.c_city"></u-badge>
					</u-cell>
					
					<u-cell isLink icon="share" title="分享获取积分" name="/pages/user/share" @click="router"></u-cell>
					<u-cell isLink icon="star" title="积分兑换地址" name="/pages/user/duijiang" @click="router"></u-cell>
					<u-cell isLink icon="order" title="积分日志" name="/pages/user/jflog/jflog" @click="router"></u-cell>
					<!-- <u-cell isLink icon="account-fill" title="3D手办" name="/pages/user/print3d/print3d" @click="router"></u-cell> -->
					<u-cell isLink icon="shopping-cart" title="合作商家" name="/pages/public/danye?id=1" @click="router"></u-cell>
					<u-gap height="6" bgColor="#eaeaea"></u-gap>
					<u-cell isLink icon="lock" title="密码修改" name="/pages/user/userinfo" @click="router"></u-cell>
					<u-cell isLink icon="trash" title="缓存清理" @click="clear_cach"></u-cell>
					<u-cell isLink icon="share-square" title="退出登录"  @click="loginout"></u-cell>
					<!-- #if APP-PLUS || H5 -->
					    <u-cell isLink icon="share-square" title="退出登录" name="/pages/user/userinfo" @click="loginout"></u-cell>
					<!-- #endif -->
			   </u-cell-group>
		  </view>
		  <view v-else>
			  <view class="head" :style="{background:tksetting.color}" style="display: flex;align-items: center;gap: 20rpx;">
			  		<u-avatar  size="60" mode="circle" class="avatar" :show-level="true" level-icon ="camera"></u-avatar>
					<view class="personInfo" @click="menus_url('/pages/public/login')" :style="{color:tksetting.titlecolor}">
						<view>立即登录</view>
						<text>登录后可享受更多服务</text>
					</view>	
			  </view>
		  </view>
		
		  <!-- #ifdef MP-WEIXIN -->
		  <my-tabbar :color="tksetting.color"></my-tabbar>
		  <!-- #endif -->
		  
		       <u-popup 
			   :show="show" @close="upopclose" mode="center" :closeable="true">
		              <view style="background-color: #fff; padding: 20rpx;">
						  {{baseInfo.name}}
						  <u-gap height="6"></u-gap>
						  <u-line></u-line>
					   </view>	  
						  <view>
							 <u-image mode="scaleToFill" :src="baseInfo.ewm" :width="qrcodeSize" :height="qrcodeSize"></u-image>
							  <!-- <canvas  canvas-id="qrcode" :style="{'width': `${qrcodeSize}px`, 'height': `${qrcodeSize}px`}" /> -->
						  </view>

		              
		  		</u-popup>
		  
	  </view>
</template>

<script>
	import Vue from 'vue';
	import {toast, clearStorageSync, setStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
	var uChartsInstance = {};
	import { mapState } from 'vuex';
	import BASE_URL from '@/api/env.js' //引入接口共用地址
	import uQRCode from '@/utils/uqrcode.js'
    export default {
    data(){
      return {
		  baseList: [],//宫格菜单
		  tuanyuan:0,
		  show:false,
		  qrcodeSrc:'',
		  qrcodeSize:300,
		  list: ['我的团队', '我的下属团队'],
		  current: 0,
		  loading:true,
		  cWidth: 750,
		  cHeight: 400,
		  baseInfo: '',
		  menus:[
			 
		  ],
		  timer:null
      }
    },
	onLoad() {
		//console.log(BASE_URL + '/api/upimg')
		
	}, 
	onShow() {
		this.getUserInfo();
		this.gettuanyuan();
	},
	 onReady() {
	    //console.log(BASE_URL)
	  },
	// 下拉刷新
	onPullDownRefresh() {
		//console.log('refresh');
		this.getUserInfo()
		uni.stopPullDownRefresh();//停止刷新
	},
	computed:{
		...mapState(['tksetting','cityName'])
	},
    methods: {
		scan(){
			uni.scanCode({
				onlyFromCamera: true,
				success: function (res) {
					console.log(res)
					if(res.result){
						useRouter('/pages/user/hexiao',{uid:res.result})
					}else{
						toast('未扫描到用户信息')
					}
				}
			});
		
		},
		scan_renwu(){
			const _this=this;
			uni.scanCode({
				onlyFromCamera: true,
				success: function (res) {
					if(res.result){
						_this.$api.daka({ka:res.result}).then(res=>{
							if(res.code==0){
								toast(res.msg);
								setTimeout(function(){
									_this.getUserInfo()
								},1000)
								
							}else{
								toast(res.msg);
							}
						})
					}else{
						toast('未扫描到打卡信息')
					}
				}
			});
		},
		makes() {
			    const _this=this;
				//此发生成的二维码无法随页面滚动
				// uQRCode.make({
				// 	canvasId: 'qrcode',
				// 	text: this.baseInfo.id,
				// 	size: this.qrcodeSize,
				// 	margin: 0,
				// 	success: res => {
				// 		console.log(res)
				// 		this.qrcodeSrc = res
				// 	}
				// })
				this.show=true;
				this.timer = setInterval(() => {
				//console.log("执行定时任务");
				this.$api.getjf().then(res=>{
					console.log(res)
					if(res.data){
						this.upopclose();
						uni.showToast({
							title: res.data,
							duration: 3000,
							success: () => {
								setTimeout(() => {
									_this.getUserInfo();
								}, 3000);
							}
						});
					}
					
				})
				// 添加您的逻辑代码
				}, 1000);
				
		},
		upopclose(){
			this.show=false;
			clearInterval(this.timer);
			this.timer = null;
			
		},
		gettuanyuan(e){
			this.$api.gettuanyuan({bz:e}).then(res => {
				//console.log(res)
				this.tuanyuan=res.data;
			})
		},
		change(e){
			this.current=e
			this.gettuanyuan(e)
		},
		loginout(){
			
			uni.showModal({
				title: '系统提示',
				content: '是否确定退出?',
				success(res) {
					if (res.confirm) {
						uni.removeStorageSync('token');
						useRouter('/pages/public/login')
					}
				}
			});
			
			
			
		},
		upload_avatar(){
			const _this=this
			uni.chooseImage({
				count: 1, 
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: function (res) {
					uni.uploadFile({
						url: BASE_URL + '/user/upimg',
						filePath: res.tempFilePaths[0],
						name: 'file',
						header:{
							token:getStorageSync('token')
						},
						success: (uploadFileRes) => {
						    //console.log(uploadFileRes)
							let retData = JSON.parse(uploadFileRes.data)
							if(retData.code==0){
								_this.$api.baseInfoSave({pic:retData.data}).then(ret => {
									console.log(ret)
									if (ret.code == 0) {
										_this.baseInfo.pic = retData.data
									} else {
										toast(res.msg)	
									}
								}) 
							}else{
								toast(retData.msg)
							}
							
						}
					});

				}
			});
		},
		getUserInfo() {
			this.$api.baseInfo().then(res => {
				this.loading=false;
				console.log(res)
				this.baseInfo = res.data;
				this.$u.vuex('userinfo', res.user);
			})
		},
		router(e){
			let  url=e.name
			useRouter(url);
		},
		menus_url(url){
			useRouter(url);
		},
		// 清除除了 token 外的所有缓存
		clear_cach() {
			uni.showModal({
				title: '系统提示',
				content: '确定要操作?',
				success(res) {
					if (res.confirm) {
						const storageInfo = uni.getStorageInfoSync();
						const keys = storageInfo.keys;
						keys.forEach(key => {
						  if (key !== 'token' && key !== 'tksetting' &&  key!=='lifeData') {
						    uni.removeStorageSync(key);
						  }
						});
						toast('清除成功!')
					}
				}
			});
		  
		},
    }
  }
</script>

<style lang="scss" scoped>
.page{background: #ccc;}

 .charts{
    width: 750rpx;
    height: 400rpx;
  }

 .content{
	 background: #fff;
	 .head{
		 background-color:#e6effb;
		 padding: 30rpx;
		
		 .avatar{
			// margin-left: 50rpx;
			border: 2px #fff solid;
		 }
		 .personInfo{
			 display: flex;
			 gap: 0rpx;
			 flex-direction: column;
			 justify-content: flex-start;
			
			 font-size: 30rpx;
			 .account{font-size: 26rpx;}
			 
		 }
		 .auth{flex: 1;text-align: right;margin-top: 40rpx;}
	}
 }
</style>
